<template>
  <section>
    <div class="tizhi-box">
      <el-row>
        <el-col :span="14">
          <el-row v-if="widget.data.physical" style="height:120px;line-height:120px;">
            体制类型 <span style="font-size:48px;margin:0 15px;">{{widget.data.physical.name}}</span>
            <span style="font-size:24px;font-weight:bold;padding:0 10px;" v-for="subtype of widget.data.physicalSubtype" :key="subtype.id"> [ {{subtype.name}} ]</span>
          </el-row>
          <el-row v-if="widget.data.physicalGrade" style="height:120px;line-height:120px;">
            体制等级 <span style="font-size:48px">{{widget.data.physicalGrade.name}}</span> 级
          </el-row>
        </el-col>
        <el-col :span="10">
          <el-row style="text-align:center;height:30px;font-weight: bold;font-size: 14px;">六气体质图</el-row>
          <el-row>
            <section v-if="isDebug">
              <e-charts ref="echart" @finished="createRadarImage" :options="radar" style="width:280px;height:260px;"></e-charts>
            </section>
            <section v-else>
              <img v-if="widget.data.radar" :src="widget.data.radar" />
              <e-charts v-else ref="echart" @finished="createRadarImage" :options="radar" style="width:280px;height:260px;"></e-charts>
            </section>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </section>
</template>

<script>

  import ECharts from "vue-echarts/components/ECharts"
  import Vue from 'vue'
  export default {
    components: { ECharts },
    name: "page-tizhi-a",
    props: ['reportData','widget', 'showConfDialog'],
    data(){
      return {
        isDebug:false,
        items:null,
        isSaved:false
      }
    },
    computed: {
      radar() {
        var radar = null;
        if (this.reportData.data.gender === '男')
          radar = {
            indicator: [
              { name: '相火', max: 66, min: -20 },
              { name: '燥金', max: 45, min: -20 },
              { name: '寒水', max: 45, min: -20 },
              { name: '湿土', max: 111, min: -20 },
              { name: '风木', max: 84, min: -20 }
            ],
            axisLabel: { textStyle: { color: '#48576a' } },
            name: { textStyle: { color: '#48576a', fontSize: 16 } }
          };
        else
          radar = {
            indicator: [
              { name: '相火', max: 66, min: -20 },
              { name: '燥金', max: 45, min: -20 },
              { name: '寒水', max: 45, min: -20 },
              { name: '湿土', max: 111, min: -20 },
              { name: '风木', max: 93, min: -20 }
            ],
            axisLabel: { textStyle: { color: '#48576a' } },
            name: { textStyle: { color: '#48576a', fontSize: 16 } }
          };
        var itemData = {
          value: this.items,//测试数据
          name: '中医体检评分',

        };
        var series = [{
          name: '中医体检评分',
          type: 'radar',
          itemStyle:
            {
              normal: {
                color: '#48576a',
                areaStyle: { normal: { color: '#888888' } },
                lineStyle: { color: '#48576a' }
              }
            },
          data: [itemData]
        }];
        return {
          tooltip: {},
          radar,
          series
        }
      }
    },
    watch:{

    },
    created(){
      if(Object.getOwnPropertyNames(this.widget.data).length < 3 || this.isDebug){
        //算items
        this.items = []
        this.items.push(this.reportData.data.sixQi[0].point)
        this.items.push(this.reportData.data.sixQi[1].point)
        this.items.push(this.reportData.data.sixQi[2].point)
        this.items.push(this.reportData.data.sixQi[3].point)
        this.items.push(this.reportData.data.sixQi[4].point)

        if(this.reportData.data.physical){
          this.widget.data.physical=this.reportData.data.physical
          this.widget.data.physicalSubtype = this.reportData.data.physicalSubtype
        }else{
          this.$message({
            type:'error',
            message: '没有体质类型数据'
          })
          return;
        }
        if(this.reportData.data.physicalGrade){
          this.widget.data.physicalGrade = this.reportData.data.physicalGrade
        }else{
          this.$message({
            type:'error',
            message: '没有体质等级数据'
          })
          return;
        }
      }
    },
    methods:{
      createRadarImage(){
        if(this.isSaved) return
        console.log(document.getElementsByTagName('canvas'))
        var imgCode = document.getElementsByTagName('canvas')[0].toDataURL();
        //console.log(imgCode)
        this.$store.dispatch({type:'uploadBase64',imgCode})
          .then(response => {
            console.log(response)
            //show.src = response;
            this.widget.data.radar = response;
            this.$emit('done',this.widget.data)
            this.isSaved=true
          })
          .catch(error=>{
            this.$message({type:'error',message:error});
          });

      },
    }
  }
</script>

<style lang="scss">
  .tizhi-box {
    margin: 0 auto;
    width: 680px;
    border: 1px solid #666;
  }
</style>
